<template>
  <div class="assets-main">
    <div class="head-row">
      <div class="left">
        <img src="@/assets/dashboard/myPending/close.png" alt="" @click="close">
        <span class="title">固定资产申购审核</span>
      </div>
    </div>
    <div class="content-row">
      <div class="base-info">
        <div class="row w50">
          <div class="label">申购单号</div>
          <div class="value">SQ-SL202211041844</div>
        </div>
        <div class="row w50">
          <div class="label">申请部门</div>
          <div class="value">闽南区域事业部/漳州公司/人事行政部</div>
        </div>
        <div class="row w50">
          <div class="label">采购类型</div>
          <div class="value">
            <el-radio-group v-model="gmapplyType">
              <el-radio :label="'0'">集团申请</el-radio>
              <el-radio :label="'1'">子公司申请</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="row w50">
          <div class="label">使用人</div>
          <div class="value">张三四</div>
        </div>
        <div class="row w50">
          <div class="label">存放位置</div>
          <div class="value">集团领料仓库-前横路169号</div>
        </div>
        <div class="row w50">
          <div class="label">到货日期</div>
          <div class="value">2023-01-01</div>
        </div>
        <div class="row w100">
          <div class="label">申请理由</div>
          <div class="value">这是一段于申请理由相关的文字申请理由相关的文字申请理由相关的文字申请理由相关的文字</div>
        </div>
      </div>
      <div class="subscribe-list">
        <div class="title-row">
          <span class="title">申购清单</span>
          <span class="total">合计</span>
          <span class="value">¥20000</span>
        </div>
        <div>
          <el-table
            class="subscribe-list-table"
            :header-cell-style="{background:'#fafafa',color:'#565551'}"
            border
            :data="subscribeList"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="物品名称"
              min-width="250"
            >
              <template slot-scope="scope">
                <div class="gmName-title">
                  <span class="gmName">{{ scope.row.gmName }}</span>
                  <div class="unitName">单位：{{ scope.row.unitName }}</div>
                </div>
                <div class="infoRow">
                  <span>编号：{{ scope.row.gmId }}</span>
                  <span>品牌：{{ scope.row.brand }}</span>
                </div>
                <div class="infoRow">
                  <span>型号：{{ scope.row.model }}</span>
                  <span>规格：{{ scope.row.spec }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="number"
              label="申购数量"
              width="120"
            >
              <template slot-scope="scope">
                <el-input type="number" min="0" v-model="scope.row.number" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="isInStock"
              label="采购数量"
              width="120"
            >
              <template slot-scope="scope">
                <el-input type="number" min="0" v-model="scope.row.isInStock" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="referPrice"
              label="参考单价(¥)"
              width="120"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.referPrice" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="unitPrice"
              label="预购单价(¥)"
              width="120"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.unitPrice" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="referencePreSupplier"
              label="供应商"
              width="136"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="total"
              label="总价(¥)"
              width="108"
            >
              <template slot-scope="scope">
                <span style="color:#1677ff">¥{{ scope.row.total }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
              width="160"
            >
              <template slot-scope="scope">
                <el-input type="textarea" v-model="scope.row.remark" placeholder="请输入备注"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="stock-list">
        <div class="title-row">
          <span class="title">库存信息</span>
        </div>
        <div>
          <el-table
            class="stock-list-table"
            :header-cell-style="{background:'#fafafa',color:'#565551'}"
            border
            :data="stockList"
            style="width: 100%">
            <el-table-column
              type="selection"
              width="40"
            >
            </el-table-column>
            <el-table-column
              prop="gmName"
              label="物品名称"
              min-width="250"
            >
              <template slot-scope="scope">
                <div class="gmName-title">
                  <span class="gmName">{{ scope.row.gmName }}</span>
                  <div class="unitName">单位：{{ scope.row.unitName }}</div>
                </div>
                <div class="infoRow">
                  <span>编号：{{ scope.row.gmId }}</span>
                  <span>品牌：{{ scope.row.brand }}</span>
                </div>
                <div class="infoRow">
                  <span>型号：{{ scope.row.model }}</span>
                  <span>规格：{{ scope.row.spec }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="wmName"
              label="仓库名称"
              show-overflow-tooltip
              width="120"
            >
              <template slot-scope="scope">
                {{ scope.row.wtmStatus === '0' ? scope.row.wmName : '无' }}
              </template>
            </el-table-column>
            <el-table-column
              prop="amCompanyName"
              label="公司或部门"
              width="120"
            >
              <template slot-scope="scope">
                {{ scope.row.wtmStatus === '5' ? scope.row.amCompanyName : '无' }}
              </template>
            </el-table-column>
            <el-table-column
              prop="wtmNumber"
              label="数量"
              width="120"
            >
              <template slot-scope="scope">
                <div>{{ scope.row.wtmNumber || 0 }}</div>
                <div class="colorgray">出库：{{ (scope.row.wtmNumber|| 0) - (scope.row.waitNumber|| 0) }}</div>
                <div class="colorgray">待出库：{{ scope.row.waitNumber || 0 }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="wtmStatus"
              label="状态"
              width="70"
            >
              <template slot-scope="scope">
                <div class="wtmStatus-5" v-if="scope.row.wtmStatus==='5'">闲置</div>
                <div class="wtmStatus-0" v-if="scope.row.wtmStatus==='0'">在库</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="scrap-list">
        <div class="title-row">
          <span class="title">报废单</span>
          <span class="total">共有报废单</span>
          <span class="value">3单</span>
        </div>
        <div>
          <el-table
            class="scrap-list-table"
            :header-cell-style="{background:'#fafafa',color:'#565551'}"
            border
            :data="scrapList"
            style="width: 100%">
            <el-table-column
              prop="documentNumber"
              label="报废单号"
            >
            </el-table-column>
            <el-table-column
              prop="operation"
              label="操作"
              width="120px"
            >
              <template slot-scope="scope">
                <span class="audit-history-btn">审核历史</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="attachment-list">
        <div class="title-row">
          <div class="left">
            <span class="title">附件</span>
            <span class="total">共有附件</span>
            <span class="value">4个</span>
          </div>
          <div class="download-all-attachment">
            <img src="@/assets/dashboard/myPending/download1.png" alt="">
            <span>下载全部</span>
          </div>
        </div>
        <div class="attachment-box">
          <div
            v-for="(item,index) in attachmentList"
            class="attachment-item"
          >
            <div class="left">
              <img src="@/assets/dashboard/searchResult/fileIcon/icon_xls.png" alt="" v-if="getFileType(item.fileName)==='xls'||getFileType(item.fileName)==='xlsx'||getFileType(item.fileName)==='csv'">
              <img src="@/assets/dashboard/searchResult/fileIcon/icon_doc.png" alt="" v-else-if="getFileType(item.fileName)==='doc'||getFileType(item.fileName)==='docx'">
              <img src="@/assets/dashboard/searchResult/fileIcon/icon_ppt.png" alt="" v-else-if="getFileType(item.fileName)==='ppt'||getFileType(item.fileName)==='pptx'">
              <img src="@/assets/dashboard/searchResult/fileIcon/icon_pdf.png" alt="" v-else-if="getFileType(item.fileName)==='pdf'">
              <img src="@/assets/dashboard/searchResult/fileIcon/icon_txt.png" alt="" v-else-if="getFileType(item.fileName)==='txt'">
              <img src="@/assets/dashboard/searchResult/fileIcon/icon_jpg.png" alt="" v-else-if="getFileType(item.fileName)==='jpg'||getFileType(item.fileName)==='png'||getFileType(item.fileName)==='pdf'">
              <img src="@/assets/dashboard/searchResult/fileIcon/icon_zip.png" alt="" v-else-if="getFileType(item.fileName)==='zip'||getFileType(item.fileName)==='rar'||getFileType(item.fileName)==='7z'">
              <img src="@/assets/dashboard/searchResult/fileIcon/icon_other.png" alt="" v-else>
              <div class="info">
                <div class="file-name">{{ item.fileName }}</div>
                <div class="file-size">{{ item.size }}<span style="margin-left: 4px">KB</span></div>
              </div>
            </div>
            <div class="right">
              <div
                class="preview-btn"
                v-if="getFileType(item.fileName)==='jpg'||getFileType(item.fileName)==='png'||getFileType(item.fileName)==='pdf'"
              >
                <img src="@/assets/dashboard/myPending/preview.png" alt="">
                <span>预览</span>
              </div>
              <div
                class="download-btn"
              >
                <img src="@/assets/dashboard/myPending/download1.png" alt="">
                <span>下载</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="audit-list">
        <div class="title-row">
          <span class="title">审批记录</span>
          <span class="total">共有记录</span>
          <span class="value">{{ auditList.length }}个</span>
        </div>
        <div class="time-line">
          <el-timeline-item
            hide-timestamp
            :color="timelineColor(activity)"
            v-for="(activity, index) in auditList"
            :key="index"
            :timestamp="activity.time">
            <div class="audit-item">
              <div class="audit-title">
                <div class="status" :class="'true'" v-if="activity.comment.includes('同意')">同意</div>
                <div class="status" :class="'false'" v-else-if="activity.comment.includes('驳回')">驳回</div>
                <div class="status" :class="'down'" v-else-if="activity.comment.includes('回退')">回退</div>
                <div class="status" :class="'none'" v-else-if="activity.comment.includes('未知')">回退</div>
                <span class="name">{{ activity.assigneeName }}（{{ activity.activityName }}）</span>
              </div>
              <div class="audit-comment">{{ activity.comment }}</div>
              <div class="audit-time">{{ activity.time }}（耗时{{ filterDurationInMillis(activity.durationInMillis) }}秒）</div>
            </div>
          </el-timeline-item>
        </div>
      </div>
    </div>
    <div class="footer-row">
      <el-input type="textarea" class="comment-textarea" v-model="formData.p_COM_comment" placeholder="请输入审核意见"></el-input>
      <div class="btn-row">
        <div class="btn-false" @click="handleAudit('false')">驳回</div>
        <div class="btn-down" @click="handleAudit('down')">回退上个任务点</div>
        <div class="btn-true" @click="handleAudit('true')">同意</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex"
import attachmentModal from "../attachmentModal.vue";
export default {
  components: {
    attachmentModal
  },
  name: "",
  props: {
    assetsData: {
      type: Object,
      default: ()=>({})
    },
  },
  data() {
    return {
      nowData: {},
      formData: {
        p_COM_comment: '',
        p_B_outcome: ''
      },
      scrapList: [],
      attachmentList: [],
      auditList: [],
      subscribeList: [],
      stockList: [],
      gmapplyType: '0',
    }
  },
  computed: {
  },
  mounted() {
    this.scrapList = [
      {
        documentNumber: 'SQ-SL202311271430',
      },
      {
        documentNumber: 'SQ-SL202311271429',
      },
      {
        documentNumber: 'SQ-SL202311271428',
      },
    ]
    this.attachmentList = [
      {
        fileName: '图片.jpg',
        size: '233.33',
        fileId: '',
      },
      {
        fileName: '文档.doc',
        size: '233.33',
        fileId: '',
      },
      {
        fileName: '表格.xls',
        size: '233.33',
        fileId: '',
      },
      {
        fileName: '压缩包.zip',
        size: '233.33',
        fileId: '',
      },
    ]
    this.auditList = [
      {
        assigneeName: '张三四',
        activityName: '子公司总经理',
        flag: 'false',
        time: '2024-01-22 13:41:45',
        durationInMillis: 33566,
        comment: '【驳回】这是审核意见啊啊啊'
      },
      {
        assigneeName: '张三四',
        activityName: '子公司总经理',
        flag: 'down',
        time: '2024-01-22 13:41:45',
        durationInMillis: 33566,
        comment: '【回退】这是审核意见啊啊啊'
      },
      {
        assigneeName: '张三四',
        activityName: '子公司总经理',
        flag: 'true',
        time: '2024-01-22 13:41:45',
        durationInMillis: 33566,
        comment: '【同意】这是审核意见啊啊啊'
      },
    ]
    this.subscribeList = [
      {
        "id": 6790,
        "name": "黄永加",
        "model": "是",
        "number": 3,
        "unitPrice": 100,
        "total": 300,
        "remark": null,
        "apoId": 3886,
        "aaoId": null,
        "goodsId": "GDZC5330009",
        "brand": "添加了品牌",
        "isInStock": 3,
        "preSupplier": null,
        "spec": "黄永加1",
        "goodsSpec": "黄永加1",
        "defaultUnit": "0001",
        "defaultUnitName": "台",
        "singleUnitName": "0001",
        "singleUnitLabel": "台",
        "miniPrice": null,
        "referPrice": 100,
        "referencePreSupplier": "福州市鼓楼区冰河广告制作店",
        "referenceCustomerNo": "KH-20230210-002081",
        "goodsType": "电脑桌",
        "waitNumber": null,
        "advancePrice": null,
        "purchaseStatus": "2",
        "applyTime": null,
        "aaoConfirmDate": null,
        "warehousingTime": null,
        "applyUserId": null,
        "applyUserName": null,
        "stayNumber": null,
        "newCustomerNo": null,
        "newCustomerName": null,
        "repPositionId": null,
        "updateCustomerApply": null,
        "updateCustomerDept": null,
        "confirmStatus": "0",
        "taxPointPrice": null,
        "gmType": null
      },
      {
        "id": 6790,
        "name": "黄永加",
        "model": "是",
        "number": 3,
        "unitPrice": 100,
        "total": 300,
        "remark": null,
        "apoId": 3886,
        "aaoId": null,
        "goodsId": "GDZC5330009",
        "brand": "添加了品牌",
        "isInStock": 3,
        "preSupplier": null,
        "spec": "黄永加1",
        "goodsSpec": "黄永加1",
        "defaultUnit": "0001",
        "defaultUnitName": "台",
        "singleUnitName": "0001",
        "singleUnitLabel": "台",
        "miniPrice": null,
        "referPrice": 100,
        "referencePreSupplier": "福州市鼓楼区冰河广告制作店",
        "referenceCustomerNo": "KH-20230210-002081",
        "goodsType": "电脑桌",
        "waitNumber": null,
        "advancePrice": null,
        "purchaseStatus": "2",
        "applyTime": null,
        "aaoConfirmDate": null,
        "warehousingTime": null,
        "applyUserId": null,
        "applyUserName": null,
        "stayNumber": null,
        "newCustomerNo": null,
        "newCustomerName": null,
        "repPositionId": null,
        "updateCustomerApply": null,
        "updateCustomerDept": null,
        "confirmStatus": "0",
        "taxPointPrice": null,
        "gmType": null
      },
    ]
    this.stockList = [
      {
        gmId: 'D601020001',
        gmName: '显示器',
        gmTypeName: '办公用品',
        spec: '61*43*44',
        brand: '联想',
        model: 'abc1234567',
        wmName: '集团领料仓库',
        amCompanyName: '信息技术本部',
        wtmStatus: '5',
        unitName: '台',
        wtmNumber: 1000,
        receiveNumber: 20,
        waitNumber: 10,
      },
      {
        gmId: 'D601020001',
        gmName: '显示器',
        gmTypeName: '办公用品',
        spec: '61*43*44',
        brand: '联想',
        model: 'abc1234567',
        wmName: '集团领料仓库',
        amCompanyName: '信息技术本部',
        wtmStatus: '0',
        unitName: '台',
        wtmNumber: 1000,
        receiveNumber: 20,
        waitNumber: 10,
      },
      {
        gmId: 'D601020001',
        gmName: '显示器',
        gmTypeName: '办公用品',
        spec: '61*43*44',
        brand: '联想',
        model: 'abc1234567',
        wmName: '集团领料仓库',
        amCompanyName: '信息技术本部',
        wtmStatus: '5',
        unitName: '台',
        wtmNumber: 1000,
        receiveNumber: 20,
        waitNumber: 10,
      },
    ]
  },
  methods: {
    close() {
      this.$emit('close')
    },
    //审核操作
    handleAudit(flag){
      this.formData.p_B_outcome = flag
    },
    //获取文件类型
    getFileType(fileName) {
      if(!fileName || typeof(fileName) !== 'string'){
        return ''
      }
      return fileName.split('.').pop()
    },
    //时间转换文字
    filterDurationInMillis(val){
      // 计算天数
      const days = Math.floor(val / (24 * 60 * 60 * 1000));
      // 计算剩余的秒数
      const remainingSeconds = val % (24 * 60 * 60);
      // 计算小时数
      const hours = Math.floor(remainingSeconds / (60 * 60));
      // 计算剩余的分钟数
      const remainingMinutes = remainingSeconds % (60 * 60);
      // 计算分钟数
      const minutes = Math.floor(remainingMinutes / 60); return `${days}天${hours}小时${minutes}分钟`;
    },
    timelineColor(item){
      if(item.comment.includes('同意')){
        return '#35cc8d'
      }
      if(item.comment.includes('驳回')){
        return '#ff4040'
      }
      if(item.comment.includes('回退')){
        return '#e67529'
      }
      return '#8d8c85'
    },
  },
};
</script>
<style lang="less" scoped>
@textColor: #1f1e1d;
@ntalkColor: #e67529;
.assets-main {
  width: calc(100% - 44px);
  height: 100%;
  background-color: #fff;
  //animation: document-move-in 0.5s;
  transform: translateX(0);
  .head-row {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f2f3f6;
    box-sizing: border-box;
    padding: 0 24px;
    .left {
      display: flex;
      align-items: center;
      img {
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
      .title {
        margin-left: 16px;
        color: @textColor;
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
  .content-row {
    width: 100%;
    height: calc(100% - 190px);
    overflow-y: auto;
    background-color: #f2f3f6;
    .base-info {
      box-sizing: border-box;
      padding: 24px 24px 8px 24px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      background-color: #fff;
      .row {
        display: flex;
        margin-bottom: 16px;
        /deep/ .el-radio__input.is-checked+.el-radio__label {
          color: @ntalkColor;
        }
        /deep/ .el-radio__input.is-checked .el-radio__inner {
          border-color: @ntalkColor;
          background: @ntalkColor;
        }
        .label {
          width: 80px;
          padding: 4px 24px 4px 0;
          box-sizing: border-box;
          font-size: 14px;
          color: #565551;
          text-align: right;
        }
        .value {
          width: calc(100% - 80px);
          font-size: 14px;
          color: @textColor;
          overflow: hidden;
          text-overflow: ellipsis;
          padding: 4px 0;
        }
        &.w100 {
          width: 100%;
        }
        &.w50 {
          width: 50%;
        }
      }
    }
    .subscribe-list {
      box-sizing: border-box;
      padding: 24px;
      margin-top: 8px;
      background-color: #fff;
      .title-row {
        width: 100%;
        display: flex;
        align-items: center;
        .title {
          font-size: 16px;
          color: @textColor;
        }
        .total {
          margin-left: 16px;
          font-size: 12px;
          color: rgba(0,0,0,0.44);
        }
        .value {
          margin-left: 4px;
          font-size: 12px;
          color: #1677ff;
        }
      }
      .subscribe-list-table {
        width: 100%;
        margin-top: 16px;
        border-radius: 6px;
      }
    }
    .stock-list {
      box-sizing: border-box;
      padding: 24px;
      margin-top: 8px;
      background-color: #fff;
      .title-row {
        width: 100%;
        display: flex;
        align-items: center;
        .title {
          font-size: 16px;
          color: @textColor;
        }
      }
      .stock-list-table {
        width: 100%;
        margin-top: 16px;
        border-radius: 6px;
        /deep/ .wtmStatus-0 {
          font-size: 12px;
          line-height: 24px;
          padding: 0 8px;
          border-radius: 4px;
          border: 1px solid #b7eb8f;
          background-color: #f6ffed;
          color: #52c41a;
          width: fit-content;
        }
        /deep/ .wtmStatus-5 {
          font-size: 12px;
          line-height: 24px;
          padding: 0 8px;
          border-radius: 4px;
          border: 1px solid #d6d5ca;
          background-color: #fafafa;
          color: #8d8c85;
          width: fit-content;
        }
        /deep/ .colorgray {
          color: #8d8c85;
        }
        /deep/ .gmName-title {
          display: flex;
          align-items: center;
          .unitName {
            margin-left: 8px;
            padding: 2px 8px;
            color: #8d8c85;
            background-color: #f0f0f0;
            border-radius: 4px;
          }
        }
        /deep/ .infoRow {
          display: flex;
          align-items: center;
          color: #8d8c85;
          span {
            white-space: nowrap;
            &:first-of-type {
              min-width: 150px;
            }
          }
        }
      }
    }
    .scrap-list {
      box-sizing: border-box;
      padding: 24px;
      margin-top: 8px;
      background-color: #fff;
      .title-row {
        width: 100%;
        display: flex;
        align-items: center;
        .title {
          font-size: 16px;
          color: @textColor;
        }
        .total {
          margin-left: 16px;
          font-size: 12px;
          color: rgba(0,0,0,0.44);
        }
        .value {
          margin-left: 4px;
          font-size: 12px;
          color: #1677ff;
        }
      }
      .scrap-list-table {
        width: 100%;
        margin-top: 16px;
        border-radius: 6px;
        /deep/ .audit-history-btn {
          color: @ntalkColor;
          cursor: pointer;
        }
      }
    }
    .attachment-list {
      box-sizing: border-box;
      padding: 24px;
      margin-top: 8px;
      background-color: #fff;
      .title-row {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
          .title {
            font-size: 16px;
            color: @textColor;
          }
          .total {
            margin-left: 16px;
            font-size: 12px;
            color: rgba(0,0,0,0.44);
          }
          .value {
            margin-left: 4px;
            font-size: 12px;
            color: #1677ff;
          }
        }
        .download-all-attachment {
          padding: 0 8px;
          border: 1px solid @ntalkColor;
          cursor: pointer;
          display: flex;
          align-items: center;
          border-radius: 4px;
          span {
            color: @ntalkColor;
            font-size: 14px;
            line-height: 22px;
            margin-left: 8px;
          }
          img {
            width: 16px;
            height: 16px;
          }
        }
      }
      .attachment-box {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 16px;
        margin-top: 18px;
        .attachment-item {
          padding: 0 12px;
          height: 74px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-radius: 6px;
          border: 1px solid #f2f3f6;
          .left {
            display: flex;
            align-items: center;
            img {
              width: 40px;
              height: 40px;
            }
            .info {
              margin-left: 8px;
              .file-name {
                font-size: 14px;
                line-height: 22px;
                color: @textColor;
                white-space: nowrap;
              }
              .file-size {
                font-size: 12px;
                line-height: 20px;
                color: rgba(0,0,0,0.44);
              }
            }
          }
          .right {
            display: flex;
            align-items: center;
            .preview-btn {
              margin-right: 8px;
            }
            .preview-btn, .download-btn {
              cursor: pointer;
              padding: 0 8px;
              display: flex;
              align-items: center;
              img {
                width: 16px;
                height: 16px;
                margin-right: 8px;
              }
              span {
                font-size: 14px;
                line-height: 22px;
                color: @ntalkColor;
              }
            }
          }
        }
      }
    }
    .audit-list {
      box-sizing: border-box;
      padding: 24px;
      margin-top: 8px;
      background-color: #fff;
      .title-row {
        width: 100%;
        display: flex;
        align-items: center;
        .title {
          font-size: 16px;
          color: @textColor;
        }
        .total {
          margin-left: 16px;
          font-size: 12px;
          color: rgba(0,0,0,0.44);
        }
        .value {
          margin-left: 4px;
          font-size: 12px;
          color: #1677ff;
        }
      }
      .time-line {
        margin-top: 18px;
        .audit-item {
          .audit-title {
            display: flex;
            align-items: center;
            .status {
              font-size: 12px;
              line-height: 20px;
              padding: 0 8px;
              border-radius: 3px;
              &.true {
                background-color: #e3faf0;
                color: #35cc8d;
              }
              &.false {
                background-color: #fae3e3;
                color: #ff4040;
              }
              &.down {
                background-color: #faece3;
                color: #e67529;
              }
              &.none {
                background-color: #f0f0f0;
                color: #8d8c85;
              }
            }
            .name {
              font-size: 14px;
              line-height: 24px;
              color: @textColor;
              margin-left: 8px;
            }
          }
          .audit-comment {
            font-size: 12px;
            line-height: 20px;
            margin-top: 8px;
            color: #65645f;
          }
          .audit-time {
            font-size: 12px;
            line-height: 20px;
            margin-top: 2px;
            color: #65645f;
            .caltime {
              color: #8d8c85;
            }
          }
        }
      }
    }
  }
  .footer-row {
    width: 100%;
    height: 126px;
    box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.08);
    border-top: 1px solid #f2f3f6;
    padding: 0 24px;
    box-sizing: border-box;
    .comment-textarea {
      width: 100%;
      height: 52px;
      margin-top: 16px;
    }
    .btn-row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 10px;
      .btn-false, .btn-down {
        cursor: pointer;
        border-radius: 6px;
        padding: 5px 16px;
        background-color: #f0f0f0;
        color: #1f1e1d;
        font-size: 14px;
        line-height: 22px;
        margin-right: 8px;
      }
      .btn-true {
        cursor: pointer;
        border-radius: 6px;
        padding: 5px 16px;
        background-color: @ntalkColor;
        color: #fff;
        font-size: 14px;
        line-height: 22px;
      }
    }
  }
}
</style>
